<template>
  <div class="edit-profile">
    <uni-nav-bar fixed="true" title="编辑资料" statusBar="true" :border="false" left-icon="left"
      @clickLeft="back"></uni-nav-bar>
    <div class="menu">
      <div class="menu-item edit-avatar ">
        <!-- 修改头像用的透明按钮 -->
        <button class="edit-avatar-btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar"></button>
        <text class="title">我的头像</text>
        <image class="avatar-img right"
          :src="temAvatarPath || userInfo.avatar || '/static/images/common/default-avatar.svg'" mode="aspectFill" />
        <image class="right-arrow" src="/static/icons/common/right-arrow-gray.svg" />
      </div>
      <div class="menu-item edit-nickname" @click="toggleEditNicknamePopup(true)">
        <text class="title">我的昵称</text>
        <text class="nickname right">{{ temNickname }}</text>
        <image class="right-arrow" src="/static/icons/common/right-arrow-gray.svg" />
      </div>
    </div>
    <button class="confirm-btn" @click="completeClick">确定</button>
  </div>
  <!-- 输入昵称弹窗 -->
  <uni-popup ref="editNicknamePopup" :is-mask-click="false" mask-background-color="rgba(0,0,0,.6)">
    <div class="popup-container">
      <!-- 中间的弹窗 -->
      <div class="popup">
        <div class="title">编辑昵称</div>
        <input class="input" type="nickname" placeholder="请输入内容" placeholder-style="color: #9f9f9f;"
          v-model="inputContent" :maxlength="20" />
        <div class="btn confirm-btn" @click="editNicknameConfirm">确定</div>
      </div>
      <!-- 关闭按钮 -->
      <img class="close-btn" src="@/static/icons/common/close-circle.svg" @click="toggleEditNicknamePopup(false)">
    </div>
  </uni-popup>
</template>

<script lang="ts" setup>
import { useUser } from "@/stores/user-store";
import { back, navigateTo } from "@/utils/navigate";
import { showToast } from "@/utils/tools";
import { storeToRefs } from "pinia";
import { getCurrentInstance } from "vue";
import { ref } from 'vue'

const userStore = useUser()
const { uploadAvatarAndName } = userStore
const { userInfo } = storeToRefs(userStore)

const currentInstance = getCurrentInstance()

//#region 编辑头像相关

/** 临时头像地址 */
const temAvatarPath = ref('')

/** 头像选择事件 */
const chooseAvatar = (e: any) => {
  temAvatarPath.value = e.detail.avatarUrl
}

/** 「完成」按钮点击事件 */
const completeClick = async () => {
  // 检查是否有头像和昵称
  if (!temAvatarPath.value && !userInfo.value.avatar) {
    showToast('请上传头像')
    return
  }
  if (!temNickname) {
    showToast('请填写昵称')
    return
  }

  userInfo.value.name = temNickname.value

  try {
    // 更新头像和昵称
    await uploadAvatarAndName(temAvatarPath.value)
    navigateTo('mine')
    showToast('编辑资料成功')
  } catch (e) {
    console.error('编辑资料失败', e)
    showToast('编辑资料失败')
  }
}

//#endregion

//#region 编辑昵称相关

/** 临时昵称变量 */
const temNickname = ref(userInfo.value.name)

/** 「修改昵称」弹窗输入内容 */
const inputContent = ref(temNickname.value)

/**
 * 「修改昵称」弹窗切换显示
 * @param isShow 是否显示
 */
const toggleEditNicknamePopup = (isShow = false) => {
  const editNicknamePopup: any = currentInstance?.refs.editNicknamePopup
  switch (isShow) {
    case false:
      editNicknamePopup.close()
    case true:
      editNicknamePopup.open()
  }
}

/** 「修改昵称」弹窗确定按钮点击事件 */
const editNicknameConfirm = () => {
  if (inputContent.value === '') {
    showToast('请输入昵称')
    return
  }
  temNickname.value = inputContent.value
  toggleEditNicknamePopup(false)
}

//#endregion
</script>

<style lang="scss" scoped>
// 选择根节点
.edit-profile {
  background-color: #f2f8f3;
  min-height: 100vh;

  // 菜单
  .menu {
    margin: 20px auto;
    width: 688.46rpx;

    display: flex;
    flex-direction: column;

    // 所有菜单项共用的样式
    .menu-item {
      width: 100%;
      height: 103.85rpx;
      background: #ffffff;
      box-sizing: border-box;

      display: grid;
      grid-template:
        'title right arrow' 1fr
        /20.5128vw 1fr 4.1026vw;
      gap: 0 5px;
      align-items: center;
      padding: 0 16px;

      &:nth-child(1) {
        border-radius: 23.08rpx 23.08rpx 0 0;
      }

      &:nth-last-child(1) {
        border-radius: 0 0 23.08rpx 23.08rpx;
      }

      // 标题
      .title {
        grid-area: title;
        font-size: 28.85rpx;
        color: #333333;
      }

      // 右边的部分
      .right {
        grid-area: right;
        justify-self: flex-end;
      }

      // 右边的箭头
      .right-arrow {
        grid-area: arrow;
        width: 30.77rpx;
        height: 30.77rpx;
      }
    }

    // 编辑头像
    .edit-avatar {
      position: relative;

      // 透明按钮
      .edit-avatar-btn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        opacity: 0;
      }

      .avatar-img {
        width: 76.92rpx;
        height: 76.92rpx;
        border-radius: 50%;
        object-fit: cover;
      }
    }

    // 编辑昵称
    .edit-nickname {

      .nickname {
        font-size: 25rpx;
        color: #8b97a1;
      }
    }
  }

  .confirm-btn {
    position: fixed;
    bottom: 90.38rpx;
    left: 50%;
    transform: translateX(-50%);

    width: 657.69rpx;
    height: 80.77rpx;
    background: #17ce92;
    border-radius: 7.69rpx;
    font-size: 30.77rpx;
    font-weight: 600;
    text-align: CENTER;
    color: #ffffff;
    line-height: 80.77rpx;
  }
}

// 「修改昵称」弹窗
.popup-container {
  width: 76.9231vw;

  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  grid-row-gap: 39px;
  justify-items: center;

  // 弹窗主体
  .popup {
    width: 76.9231vw;
    background: #ffffff;
    border-radius: 4px;

    padding: 16px;
    display: grid;
    grid-template:
      'title' 21px
      '.' 12px
      'input' 1fr
      '.' 12px
      'btn' 36px;
    justify-items: center;

    position: relative;

    // 标题
    .title {
      grid-area: title;

      font-size: 3.8462vw;
      color: #333;
    }

    // 输入框
    .input {
      grid-area: input;
      align-self: center;

      min-height: 7vw;
      width: calc(76.9231vw - 32px);
      border: 1px solid #17ce92;
      border-radius: 4px;

      box-sizing: border-box;
      padding-left: 10px;

      // 文字两端对齐
      text-align: justify;
      font-size: 3.8462vw;

      // 占位文字样式
      &::moz-placeholder {
        color: red;
      }

    }

    // 「确定」按钮
    .btn {
      grid-area: btn;

      width: 68.7179vw;
      background: #17ce92;
      border-radius: 4px;

      // 文字居中
      display: flex;
      justify-content: center;
      align-items: center;

      font-size: 3.5897vw;
      color: #fff;
    }
  }

  // 取消按钮
  .close-btn {
    width: 8.7179vw;
    height: 8.7179vw;
  }
}
</style>
